<template>
  <div class="app">
    <!-- 导航面包屑 -->
    <el-card>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>营销</el-breadcrumb-item>
        <el-breadcrumb-item>秒杀</el-breadcrumb-item>
      </el-breadcrumb>
      <h1>秒杀</h1>
    </el-card>

    <!-- 筛选查询板块 -->
    <el-card>
      <el-form ref="seckillForm" :label-position="'right'" label-width="90px" :model="seckillForm">
        <el-row type="flex" justify="space-around">
          <el-col :span="8">
            <el-form-item label="状态" prop="status">
              <el-select v-model="seckillForm.status" placeholder="请选择使用状态">
                <el-option label="全部" value="0"></el-option>
                <el-option label="未开始" value="1"></el-option>
                <el-option label="进行中" value="2"></el-option>
                <el-option label="已结束" value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="名称" prop="name">
              <el-input v-model="seckillForm.name" placeholder="请输入名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4"></el-col>
          <el-col :span="2">
            <el-button type="primary" @click="findSeckill">查询</el-button>
          </el-col>
          <el-col :span="2">
            <el-button class="resetBtn" @click="resetForm">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 秒杀活动列表列表 -->
    <el-card>
      <el-row :gutter="22" type="flex" justify="space-between">
        <el-col :span="5">
          <span>秒杀活动列表</span>
        </el-col>
        <el-col :span="13"></el-col>
        <el-col :span="2">
          <el-button type="primary" @click="addSeckill">+&nbsp;新建</el-button>
        </el-col>
        <el-col :span="3">
          <el-button type="danger" @click="batchDel">批量删除</el-button>
        </el-col>
      </el-row>
      <el-table :data="seckillList" style="width: 100%" @selection-change="batchId">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="name" label="活动名称"></el-table-column>
        <el-table-column prop="price" label="原价(元)"></el-table-column>
        <el-table-column prop="discountPrice" label="折扣价(元)"></el-table-column>
        <el-table-column prop="store" label="库存"></el-table-column>
        <el-table-column prop="status" label="活动状态"></el-table-column>
        <el-table-column prop="validity" label="有效期" width="300"></el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <!-- 编辑按钮 -->
            <el-button style="margin-right:30px" type="text" @click="editSeckill(scope.row)">编辑</el-button>
            <!-- 停用按钮 -->
            <el-button type="text" @click="delSeckill(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 底部分页 -->
      <el-pagination
        @size-change="sizeChange"
        @current-change="pageChange"
        :current-page="seckillPage.page"
        :page-sizes="[2, 5, 10, 20]"
        :page-size="seckillPage.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="count"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //筛选秒杀活动
      seckillForm: {
        status: "",
        name: "",
      },
      //秒杀数据列表
      seckillList: [],
      //秒杀列表页数
      seckillPage: {
        page: 1,
        limit: 2,
      },
      //秒杀数据总数
      count: 0,
      //批量删除id数组
      ids: [],
    };
  },
  methods: {
    //监控每页条数
    sizeChange(newSize) {
      this.seckillPage.limit = newSize;
      this.getSeckillList();
    },
    //监控页码
    pageChange(newPage) {
      this.seckillPage.page = newPage;
      this.getSeckillList();
    },
    //点击跳转添加优惠卷页面
    addSeckill() {
      this.$store.commit("action", "新建");
      this.$router.replace("/home/addSeckill");
    },
    //秒杀列表渲染
    async getSeckillList() {
      const { data: res } = await this.$axios.get("/vip/seckill/list", {
        params: this.seckillPage,
      });
      if (res.code != 0) return this.$message.error("获取秒杀列表失败!");
      this.count = res.count;
      this.seckillList = res.data;
      for (let item of this.seckillList) {
        switch (item.status) {
          case 1:
            item.status = "未开始";
            break;
          case 2:
            item.status = "进行中";
            break;
          case 3:
            item.status = "已结束";
            break;
        }
      }
    },
    //筛选查询秒杀数据
    async findSeckill() {
      const { data: res } = await this.$axios.get("/vip/seckill/list", {
        params: {
          status: this.seckillForm.status,
          name: this.seckillForm.name,
          page: this.seckillPage.page,
          limit: this.seckillPage.limit,
        },
      });
      if (res.code != 0) return this.$message.error("查询秒杀列表失败!");
      this.count = res.count;
      this.seckillList = res.data;
      for (let item of this.seckillList) {
        switch (item.status) {
          case 1:
            item.status = "未开始";
            break;
          case 2:
            item.status = "进行中";
            break;
          case 3:
            item.status = "已结束";
            break;
        }
      }
    },
    //重置筛选
    resetForm() {
      this.$refs.seckillForm.resetFields();
      this.getSeckillList();
    },
    //删除秒杀
    async delSeckill(seckillId) {
      const confirmResult = await this.$confirm(
        "此操作将永久删除, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      if (confirmResult == "confirm") {
        const { data: res } = await this.$axios.get("/vip/seckill/delete", {
          params: {
            id: seckillId,
          },
        });
        if (res.code != 0) return this.$message.error("删除失败!");
        this.$message.success("删除成功!");
        this.getSeckillList();
      } else {
        return this.$message.info("已取消删除");
      }
    },
    //批量选中的id
    batchId(ids) {
      this.ids = [];
      for (let item of ids) {
        this.ids.push(item.id);
      }
    },
    //批量删除
    async batchDel() {
      const confirmResult = await this.$confirm(
        "此操作将永久删除, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      if (confirmResult == "confirm") {
        const { data: res } = await this.$axios.get("/vip/seckill/deleteIds", {
          params: {
            ids: this.ids.join(","),
          },
        });
        if (res.code != 0) return this.$message.error("批量删除秒杀失败!");
        this.$message.success("批量删除秒杀成功!");
        this.getSeckillList();
      } else {
        return this.$message.info("已取消删除");
      }
    },
    //修改秒杀
    editSeckill(editInfo) {
      this.$store.commit("action", "编辑");
      this.$store.commit("editInfo", editInfo);
      this.$router.replace("/home/addSeckill");
    },
  },
  mounted() {
    //渲染秒杀页面
    this.getSeckillList();
  },
};
</script>
<style lang="less" scoped>
.el-link {
  margin-right: 5px;
}
.el-select {
  width: 260px;
}
.el-input {
  width: 260px;
}
.app > .el-card:nth-child(3) {
  margin-top: 15px;
}
</style>